<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ILOVEFREE 搜索功能测试</title>
    <link rel="stylesheet" href="ilovefree-search.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #f5f5f5;
            font-family: Arial, sans-serif;
        }
        .test-info {
            background: white;
            padding: 20px;
            margin: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .test-item {
            margin: 10px 0;
            padding: 10px;
            background: #f8f9fa;
            border-left: 4px solid #007bff;
        }
        .status-success { border-left-color: #28a745; }
        .status-error { border-left-color: #dc3545; }
        .status-warning { border-left-color: #ffc107; }
    </style>
</head>
<body>
    <!-- ILOVEFREE 顶部搜索区域 -->
    <header class="dingbu">
        <!-- Logo区域 -->
        <div class="logo-area">
            <h1>ILOVEFREE</h1>
            <p>免费资源导航_免版权图片_免费商用字体_免费音频、视频等设计素材下载</p>
        </div>

        <!-- 搜索区域 -->
        <div class="search-container">
            <div class="search-wrapper">
                <form id="searchForm" class="search-form" action="https://www.baidu.com/s" method="get" target="_blank">
                    <!-- 搜索引擎选择器 -->
                    <div class="search-select">
                        <button type="button" class="search-engine-toggle" id="searchEngineToggle">
                            <i class="fas fa-search"></i>
                            <span id="currentSearchEngine">百度</span>
                            <i class="fas fa-chevron-down"></i>
                        </button>

                        <div class="search-engine-dropdown" id="searchEngineDropdown">
                            <div class="search-engine-options">
                                <div class="search-engine-option active" data-engine="baidu" data-action="https://www.baidu.com/s" data-name="wd">
                                    <div class="search-engine-icon baidu"></div>
                                    <span>百度</span>
                                </div>
                                <div class="search-engine-option" data-engine="sogou" data-action="https://www.sogou.com/web" data-name="query">
                                    <div class="search-engine-icon sogou"></div>
                                    <span>搜狗</span>
                                </div>
                                <div class="search-engine-option" data-engine="bing" data-action="https://www.bing.com/search" data-name="q">
                                    <div class="search-engine-icon bing"></div>
                                    <span>必应</span>
                                </div>
                                <div class="search-engine-option" data-engine="360" data-action="https://www.so.com/s" data-name="q">
                                    <div class="search-engine-icon so360"></div>
                                    <span>360搜索</span>
                                </div>
                                <div class="search-engine-option" data-engine="google" data-action="https://www.google.com/search" data-name="q">
                                    <div class="search-engine-icon google"></div>
                                    <span>Google</span>
                                </div>
                                <div class="search-engine-option" data-engine="wangpan" data-action="https://www.pansearch.me" data-name="q">
                                    <div class="search-engine-icon wangpan"></div>
                                    <span>网盘搜索</span>
                                </div>
                                <div class="search-engine-option" data-engine="yingshi" data-action="https://www.libvio.pro/search" data-name="wd">
                                    <div class="search-engine-icon yingshi"></div>
                                    <span>影视搜索</span>
                                </div>
                                <div class="search-engine-option" data-engine="youhui" data-action="https://www.yhhd.com" data-name="keyword">
                                    <div class="search-engine-icon youhui"></div>
                                    <span>搜优惠券</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 搜索输入框 -->
                    <div class="search-input-group">
                        <input type="text"
                               name="wd"
                               id="searchInput"
                               class="search-input"
                               placeholder="请您输入您要搜索的内容..."
                               autocomplete="off">
                    </div>

                    <!-- 搜索按钮 -->
                    <button type="submit" class="search-button">
                        <i class="fas fa-search"></i>
                        <span>搜索</span>
                    </button>
                </form>
            </div>
        </div>

        <!-- 波浪装饰 -->
        <div class="wave-decoration"></div>
    </header>

    <!-- 测试信息区域 -->
    <div class="test-info">
        <h2>ILOVEFREE 搜索功能测试报告</h2>
        <div id="testResults">
            <div class="test-item status-success">
                <strong>✓ CSS样式加载</strong> - ilovefree-search.css 已成功加载
            </div>
            <div class="test-item status-success">
                <strong>✓ Font Awesome图标</strong> - 图标库已加载
            </div>
        </div>

        <h3>功能测试清单：</h3>
        <div class="test-item">
            <strong>测试1：搜索引擎切换</strong><br>
            点击搜索引擎下拉按钮，检查是否显示8个搜索引擎选项
        </div>
        <div class="test-item">
            <strong>测试2：搜索功能</strong><br>
            输入搜索关键词，选择不同搜索引擎，点击搜索按钮测试
        </div>
        <div class="test-item">
            <strong>测试3：快捷键</strong><br>
            按 Ctrl+K (Windows) 或 Cmd+K (Mac) 聚焦搜索框
        </div>
        <div class="test-item">
            <strong>测试4：响应式设计</strong><br>
            调整浏览器窗口大小，检查移动端适配效果
        </div>
        <div class="test-item">
            <strong>测试5：动画效果</strong><br>
            检查logo动画、下拉菜单动画、悬停效果等
        </div>

        <button onclick="runTests()" style="padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer;">
            运行自动测试
        </button>
    </div>

    <script src="ilovefree-search.js"></script>
    <script>
        // 自动测试功能
        function runTests() {
            const results = document.getElementById('testResults');

            // 测试JavaScript是否加载
            const testJS = document.createElement('div');
            testJS.className = window.ilovefreeSearch ? 'test-item status-success' : 'test-item status-error';
            testJS.innerHTML = window.ilovefreeSearch ?
                '<strong>✓ JavaScript加载</strong> - ilovefree-search.js 已成功加载' :
                '<strong>✗ JavaScript加载失败</strong> - ilovefree-search.js 未能正确加载';
            results.appendChild(testJS);

            // 测试DOM元素
            const elements = [
                { id: 'searchEngineToggle', name: '搜索引擎切换按钮' },
                { id: 'searchEngineDropdown', name: '搜索引擎下拉菜单' },
                { id: 'searchInput', name: '搜索输入框' },
                { id: 'searchForm', name: '搜索表单' }
            ];

            elements.forEach(elem => {
                const test = document.createElement('div');
                const exists = document.getElementById(elem.id);
                test.className = exists ? 'test-item status-success' : 'test-item status-error';
                test.innerHTML = exists ?
                    `<strong>✓ ${elem.name}</strong> - 元素已创建` :
                    `<strong>✗ ${elem.name}</strong> - 元素创建失败`;
                results.appendChild(test);
            });

            // 测试搜索引擎选项
            const options = document.querySelectorAll('.search-engine-option');
            const testOptions = document.createElement('div');
            testOptions.className = options.length === 8 ? 'test-item status-success' : 'test-item status-warning';
            testOptions.innerHTML = `<strong>✓ 搜索引擎选项</strong> - 已创建 ${options.length} 个搜索引擎选项`;
            results.appendChild(testOptions);

            // 测试CSS类
            const cssTest = document.createElement('div');
            const header = document.querySelector('.dingbu');
            const hasLogo = document.querySelector('.logo-area');
            cssTest.className = (header && hasLogo) ? 'test-item status-success' : 'test-item status-error';
            cssTest.innerHTML = (header && hasLogo) ?
                '<strong>✓ CSS结构</strong> - 头部区域和Logo区域已正确创建' :
                '<strong>✗ CSS结构</strong> - 头部区域或Logo区域创建失败';
            results.appendChild(cssTest);

            console.log('ILOVEFREE 搜索功能测试完成');
            console.log('测试结果:', {
                jsLoaded: !!window.ilovefreeSearch,
                elementsFound: elements.filter(e => document.getElementById(e.id)).length,
                searchEngineOptions: options.length,
                cssStructure: !!(header && hasLogo)
            });
        }

        // 页面加载完成后运行测试
        document.addEventListener('DOMContentLoaded', () => {
            setTimeout(runTests, 1000);
        });
    </script>
</body>
</html>